<template>
  <div>
    <div>
      <strong style="font-size: 40px">当前船舶：</strong>
      <el-select
        v-model="shipId"
        placeholder="请选择船舶"
        @input="getShipAllInfo(shipId)"
      >
        <el-option
          v-for="item in shipArray"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>

    <!-- 员工表 -->
    <div
      ref="echartsContainer"
      style="width: 600px; height: 400px"
      class="container"
    ></div>

    <!-- 温度表 -->
    <div class="container" style="width: 600px; height: 400px" id="box2">
      <!-- <div id="echartsContainer2">
        <el-select
          v-model="shipId"
          placeholder="请选择船舶"
          @input="getShipTemperature(shipId)"
        >
          <el-option
            v-for="item in shipArray"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div> -->
      <div
        id="echartsContainer2"
        ref="echartsContainer2"
        style="width: 600px; height: 400px"
      ></div>
    </div>

    <!-- 湿度表 -->
    <div class="container" style="width: 600px; height: 400px" id="box3">
      <div
        id="echartsContainer3"
        ref="echartsContainer3"
        style="width: 600px; height: 400px"
      ></div>
    </div>

    <!-- 油量表 -->
    <div class="container" style="width: 600px; height: 400px" id="box4">
      <div
        id="echartsContainer4"
        ref="echartsContainer4"
        style="width: 600px; height: 400px"
      ></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Echars",
  data() {
    return {
      shipWithUserCount: {
        names: [],
        counts: [],
      },
      temperatures: [], //温度
      humidities: [], // 湿度
      innages: [], // 剩余油量
      times: [], //时间
      shipId: 1, //船舶id
      shipArray: [], //所有船舶
    };
  },
  created() {
    // 获取船只成员
    this.axios({
      url: "/app/echars/getShipWithUserCount.do",
      method: "GET",
      params: {},
    }).then((result) => {
      this.shipWithUserCount = result.data.data;
      console.log(this.shipWithUserCount);

      var myChart = echarts.init(this.$refs.echartsContainer);
      myChart.setOption({
        title: {
          text: "船员数量",
        },
        tooltip: {},
        xAxis: {
          data: this.shipWithUserCount.names,
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: this.shipWithUserCount.counts,
          },
        ],
      });
    });

    /* 获取所有船只信息 */
    this.axios({
      url: "/app/ship/getAllShip.do",
      method: "GET",
      params: {},
    }).then((result) => {
      this.shipArray = result.data.data;
    });

    /* 初始数据 */
    // 获取船只状态的所有信息
    this.getShipAllInfo(this.shipId);
    // // 获取温度
    // this.getShipTemperature(this.shipId);
    // // 获取湿度
    // this.getShipHumidity(this.shipId);
  },
  mounted() {
    // 获取船只状态的所有信息
    // this.getShipAllInfo(this.shipId);
  },
  methods: {
    // 查找船舶的相关数据

    /* 绘制温度变化表 */
    // 通过船只id获取船只温度信息，并且绘制表格
    getShipTemperature(shipId) {
      console.log("执行");
      /* 温度变化 */
      this.axios({
        url: "/app/echars/getShipTemperatureById.do",
        method: "GET",
        params: {
          shipId: this.shipId,
        },
      }).then((result) => {
        this.times = [];
        this.temperatures = [];
        /* 数据绑定 */
        let temperatureAndTimesArray = result.data.data;
        for (var i = 0; i < temperatureAndTimesArray.length; i++) {
          this.temperatures.push(temperatureAndTimesArray[i].temperature);
          this.times.push(temperatureAndTimesArray[i].time);
        }
        // 绘制表格
        var myChart = echarts.init(this.$refs.echartsContainer2);
        myChart.setOption({
          title: {
            text: "温度变化",
          },
          xAxis: {
            type: "category",
            data: this.times,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.temperatures,
              type: "line",
              smooth: true,
            },
          ],
        });
      });
    },
    // 绘制湿度变化表
    getShipHumidity(shipId) {
      console.log("已经发送");
      this.axios({
        url: "/app/echars/getShipHumidityById.do",
        method: "GET",
        params: {
          shipId: this.shipId,
        },
      }).then((result) => {
        console.log("已经发送");
        this.times = [];
        this.humidities = [];
        /* 数据绑定 */
        let humidityAndTimesArray = result.data.data;
        for (var i = 0; i < humidityAndTimesArray.length; i++) {
          this.humidities.push(humidityAndTimesArray[i].humidity);
          this.times.push(humidityAndTimesArray[i].time);
        }
        // 绘制表格
        var myChart = echarts.init(this.$refs.echartsContainer3);
        myChart.setOption({
          title: {
            text: "湿度变化",
          },
          xAxis: {
            type: "category",
            data: this.times,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.humidities,
              type: "line",
              smooth: true,
            },
          ],
        });
      });
    },
    // 获取船只状态的所有信息
    getShipAllInfo(shipId) {
      // 发送请求
      this.axios({
        url: "/app/echars/getShipAllInfoById.do",
        method: "GET",
        params: {
          shipId: this.shipId,
        },
      }).then((result) => {
        // 前端数据初始化
        this.times = [];
        this.temperatures = [];
        this.humidities = [];
        this.innages = [];

        /* 数据绑定 */
        let shipInfoArray = result.data.data;
        // console.log("看看数据是怎么样的", shipInfoArray);
        for (var i = 0; i < shipInfoArray.length; i++) {
          this.times.push(shipInfoArray[i].time);
          this.temperatures.push(shipInfoArray[i].temperature);
          this.humidities.push(shipInfoArray[i].humidity);
          this.innages.push(shipInfoArray[i].innage);
        }
        // // 把已存在的表格删除
        // var myChart = this.$echarts.getInstanceByDom(
        //   document.getElementById("echartsContainer3")
        // );
        // // console.log(myChart); //检查是否存在图表实例
        // if (myChart != null && myChart != "" && myChart != undefined) {
        //   //  已存在则调用 dispose() 方法销毁
        //   myChart.dispose();
        // }
        // 删除原来就存在的表格
        echarts.dispose(document.getElementById("echartsContainer2"));
        echarts.dispose(document.getElementById("echartsContainer3"));
        echarts.dispose(document.getElementById("echartsContainer4"));

        // 绘制表格
        // 温度表
        echarts.init(this.$refs.echartsContainer2).setOption({
          title: {
            text: "温度变化/℃",
          },
          xAxis: {
            type: "category",
            data: this.times,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.temperatures,
              type: "line",
              smooth: true,
            },
          ],
        });
        // 湿度表渲染
        echarts.init(this.$refs.echartsContainer3).setOption({
          title: {
            text: "湿度变化/%",
          },
          xAxis: {
            type: "category",
            data: this.times,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.humidities,
              type: "line",
              smooth: true,
            },
          ],
        });
        // 油量表渲染
        echarts.init(this.$refs.echartsContainer4).setOption({
          title: {
            text: "剩余油量变化/M³",
          },
          xAxis: {
            type: "category",
            data: this.times,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.innages,
              type: "line",
              smooth: true,
            },
          ],
        });
      });
    },
  },
};
</script>

<style scoped>
.container {
  float: left;
}
/* 温度表 */
#box2 {
  position: relative;
  left: 0px;
  top: 0px;
}
#echartsContainer2 {
  position: absolute;
  left: 100px;
  top: -5px;
  /* 元素置顶 */
  z-index: 99999;
}

/* 湿度表 */
#box3 {
  position: relative;
  left: 0px;
  top: 0px;
}
#echartsContainer3 {
  position: absolute;
  left: 100px;
  top: -5px;
  /* 元素置顶 */
  z-index: 99999;
}
/* 油量表 */
#box4 {
  position: relative;
  left: 0px;
  top: 0px;
}
#echartsContainer4 {
  position: absolute;
  left: 100px;
  top: -5px;
  /* 元素置顶 */
  z-index: 99999;
}
</style>

